<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="此页面内容的简介" />
    <meta name="keywords" content="关键词1，关键词2，关键词3…关键词N" />
    <meta name=" copyright "  content="版权信息" />

    <link rel="stylesheet" href="common_module/0.1/stylesheets/reset.css" data-type="global">
    <link rel="stylesheet" href="common_module/0.1/stylesheets/common.css" data-type="global">
    <link rel="stylesheet" href="common_module/0.1/fonts/iconfont.css" data-type="global">
    <script type="text/javascript" src="common_module/0.1/javascripts/jquery-1.8.3.min.js" data-type="global"></script>
    <title></title>
    <link rel="stylesheet" href="css/header.css">
    <script type="text/javascript" src="js/demo.js"></script>
    <!--不建议用外部模块样式，会导致模块刷新闪烁-->
</head>

<body>

<style>
    .lky_nav_02{
        width: 1200px;
        background: #2577e3;
        margin: 0 auto;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .lky_nav_02 nav{
        width: 1200px;
        margin: 0 auto;
    }
    .lky_nav_02 nav ul{
        text-align: left;
        font-size: 0;
    }
    .lky_nav_02 nav li{
        display: inline-block;
        vertical-align: top;
        text-align: center;

    }
    .lky_nav_02 nav li a{
        color: #ffffff;
        display: block;
        min-width: 80px;
        padding: 0 15px;
        text-align: center;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;

        height: 64px;
    }
    .lky_nav_02 nav li a:hover{
        background: #1b6bd6;
    }
    .lky_nav_02 nav li.cur a{
        background: #0a56bb;
    }
    .lky_nav_02 nav li.cur i{
        height: 64px;
        line-height: 62px;
        font-size: 40px;
    }
    .lky_nav_02 nav li.cur span{
        display: none;

    }
    .lky_nav_02 nav li i{
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        display: block;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);

        transition: 300ms;
        -moz-transition: 300ms;
        -webkit-transition: 300ms;
    }
    .lky_nav_02 nav li span{
        font: normal 12px/16px "Microsoft YaHei";
    }
</style>
<script>
    $(function () {
        $('.lky_nav_02 li').click(function () {
            $(this).addClass('cur').siblings().removeClass('cur');
        })
    });
</script>
<div class="lky_nav_02">
    <nav>
        <ul>
            <li class="cur"><a href="javascript:;">
                    <i class="iconfont-m icon-m-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <li><a href="javascript:;">
                <i class="iconfont-m icon-m-ticket"></i>
                <span>门票</span>
            </a></li>
            <li><a href="javascript:;">
                <i class="iconfont-m icon-m-hotel"></i>
                <span>酒店</span>
            </a></li>
            <li><a href="javascript:;"><i class="iconfont-m icon-m-zyx"></i>
                <span>自由行</span>
            </a></li>
            <li><a href="javascript:;"><i class="iconfont-m icon-m-route"></i>
                <span>跟团游</span>
            </a></li>
            <li><a href="javascript:;"><i class="iconfont-m icon-m-qiche"></i>
                <span>包租车</span>
            </a></li>
            <li><a href="javascript:;"><i class="iconfont-m icon-m-food"></i>
                <span>美食</span>
            </a></li>
            <li><a href="javascript:;"><i class="iconfont-m icon-m-shopping"></i>
                <span>购物</span>
            </a></li>
            <li><a href="javascript:;"><i class="iconfont-m icon-m-groupbuying"></i>
                <span>团购</span>
            </a></li>
            <li><a href="javascript:;"><i class="iconfont-m icon-m-destination"></i>
                <span>目的地</span>
            </a></li>
        </ul>
    </nav>
</div>
</body>
</html>